<template>
    <div class="user">
        <el-button type="primary" @click="userAdd">添加用户</el-button>
        <el-table
                :data="users"
                style="width: 100%">
            <el-table-column
                    label="手机号">
                <template slot-scope="scope">
                    <span>{{ scope.row.phone }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="名称">
                <template slot-scope="scope">
                    <span>{{ scope.row.userName }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="邮箱">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.email === null ? '空' : scope.row.email }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="级别">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ levelValue(scope.row.userType) }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="密码">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.passWord }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button><br />
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                center>
            <el-form :model="user" ref="user" label-width="100px" class="demo-ruleForm">
                <el-form-item label="手机号" prop="name">
                    <el-input v-model="user.phone" placeholder="登陆使用"></el-input>
                </el-form-item>
                <el-form-item label="名称" prop="name">
                    <el-input v-model="user.userName" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item label="身份" prop="region">
                    <el-select v-model="user.userType">
                        <el-option v-for="(leve,index) in level" :key="index" :value="index" :label="leve">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="邮箱" prop="name">
                    <el-input v-model="user.email"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="name">
                    <el-input v-model="user.passWord" show-password></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="formSubmit">确 定</el-button>
          </span>
        </el-dialog>

    </div>
</template>

<script>
  export default {
    name: "User",
    data(){
      return {
        users : [],
        user:{
          userType : 0,

        },
        level: ["学生","老师","校内工作人员","管理"],
        dialogVisible : false,
        isAdd : null,
      }
    },
    created() {
      this.getUser();
    },
    methods: {
      getUser(){
        this.$api.user.getUsers().then(res => {
          this.users = res.data;
        })
      },
      levelValue(_level){
        return this.level[_level];
      },
      userAdd(){
        this.isAdd = true;
        this.user = {userType : 0,}
        this.dialogVisible = true;
      },
      handleDelete(id , obj){
        this.$confirm('确定要删除该用户吗?','提示',{
          confirmButtonText : '确定',
          cancelButtonText : '取消',
          type: 'warning'
        }).then(() => {
          this.$api.user.userDelete(obj)
              .then(() => {
                this.$message.success('删除成功');
                this.getUser();
              });
        }).catch(() => {
          this.$message.error('删除失败');
        })
      },
      handleEdit(id , obj){
        this.dialogVisible=true;
        this.user = {...obj};
        this.isAdd = false;
      },
      formSubmit(){
        if (this.isAdd === null) return this.$message.error('错误操作');
        if (this.isAdd){
          this.$api.user.userAdd(this.user)
              .then(() => {
                this.$message.success('添加成功!');
                this.dialogVisible = false;
                this.getUser();
              })
              .catch(() => {
                this.$message.error('添加失败');
              })
        }else{
          this.$api.user.userPatch(this.user.id , this.user)
              .then(() => {
                this.$message.success('修改成功!');
                this.dialogVisible = false;
                this.getUser();
              })
              .catch(() => {
                this.$message.error('修改失败');
              })
        }
      }
    }
  }
</script>

<style scoped>

</style>
